<extend name="en_us:Public:base" />
<block name="title">
    <title>{$hotelDetail.name} - Make the accommodation better</title>
</block>
<block name="extendHead">
    <meta name="wap-font-scale" content="no">
    <meta name="format-detection" content="telephone=no" />
    <link rel="stylesheet" type="text/css" href="/Public/dist/Home/PublicPage/book.css?rev=f97dcea65a7f7034e9b3e57282133e3a">
</block>
<block name="document">
    <div id="doc">
    	<img id="doc-content" src="/Public/dist/Home/PublicPage/image/preview_media_bg.jpg">
    	<div id="doc-center" class="text-center">
    		<div class="doc-center-title">{$hotelDetail.name}</div>
    		<div class="doc-center-desc">{$hotelDetail.description}</div>
    		<div id="touchQRCode" class="doc-center-qrcode" data-logo="{:MEIZHU_URL}{$logoimageurl}" original="http://{:MEIZHU_BOOK_HOST}/Home/BookPage/index?hotel={$hotelDetail.hotelentity_id}">
    		    <div class="logo-Content">
    		    	<img id="touchQRCodeContent"/>
    		    	<img src="{:MEIZHU_URL}{$logoimageurl}" id="touchLogoContent"/>
    		    </div>
            </div>
    		<div class="doc-center-footer">Identify the qrcode in the diagram</div>
    	</div>
    </div>
</block>
<block name="extendFootJs">
    <script type="text/javascript" src="/Public/jslib/qrcode/jquery-qrcode.min.js"></script>
    <script type="text/javascript">
    	$(function(){
		    var canvasContainer = $('#touchQRCode');
		    var canvasHeight = canvasContainer.height();
            canvasContainer.find('canvas').remove();
		    canvasContainer.qrcode({
		        width: canvasHeight,
		        height: canvasHeight,
		        text: canvasContainer.attr('original')
		    });
            $('#touchQRCodeContent').attr('src', canvasContainer.find('canvas')[0].toDataURL("image/jpeg"));
    	});
    </script>
</block>
